<template>
	<view style="height: 100%;">
		<view ref="mescrollRef1" :fixed="false" height="100%" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption"
			@up="upCallback">
			<view>
				<view class="model waterfall" v-if="isShow==0&& dataList.length >0">
					<view class="model-box waterfall-box ">
						<image mode="widthFix" class="waterfall-item" v-for="(image,index) in dataList" :key="index"
							:data-src="image.thumb" :src="image.thumb" @tap="browse"></image>
					</view>
				</view>
				<view class="model" v-if="isShow==1 && List.length >0">
					<view class="model-box flex-box" 
					v-for="(item,index) in List" :key="index" :data-src="item.link"
						@tap="audioPlay(index)">
						<image :src="comm_img_url+'/classroom/play.png'" class="play" v-if="item.status"></image>
						<image :src="comm_img_url+'/classroom/suspend.png'" class="play" v-else></image>
						<view class="box-1">
							<view class="one_ell">{{item.title}}</view>
							<view class="time">{{item.create_time}}</view>
						</view>
						<image :src="comm_img_url+'/classroom/sound.png'" class="sound" v-if="item.status"></image>
						<image :src="comm_img_url+'/classroom/sound.gif'" class="sound" v-else></image>
					</view>
				</view>
			</view>
		</view>
	</view>

	</view>
</template>

<script>
	// import app from "@/common/js/comm_url.js"
	// import mescrollUni from "./components/mescroll-uni/mescroll-uni.vue"
	// import MescrollMixin from "./components/mescroll-uni/mescroll-mixins.js";
	export default {
		
		data() {
			return {
				comm_img_url:'',
				dataList: [],
				List:[],
				downOption: {
					use: false,
					showLoading: false
				},
				currentAudioIndex: -1,
				innerAudioContext: uni.createInnerAudioContext(),
				upOption: {
					page: {
						num: 0,
						size: 10
					},
					noMoreSize: 40,
					empty: {
						tip: '~暂无音频~',
						icon: 'https://static.dhlshu.cn/app/static/list-none-empty.png'
					}
				},

			};
		},
		props:['isShow','getId'],
		methods: {
			browse(e) {
				var current = e.target.dataset.src
				var imglist = [];
				this.dataList.forEach((item, index) => {
					imglist.push(item.thumb);
				})

				uni.previewImage({
					current: current,
					urls: imglist
				})
			},
			pauseAudio() {
				if (this.currentAudioIndex != -1) {
					this.innerAudioContext.stop();
					this.listAudio[this.currentAudioIndex].status = true;
				}
			},
			audioPlay(index) {
				var _myself = this.List[index];
				if (this.currentAudioIndex == index) {
					_myself.status ? this.innerAudioContext.play() : this.innerAudioContext.stop();
				} else {
					this.innerAudioContext.stop();
					this.innerAudioContext.src = _myself.link;
					this.List.forEach(element => {
						element.status = true;
					});
					this.innerAudioContext.play();
				}
				_myself.status = !_myself.status;
				this.currentAudioIndex = index;
				this.innerAudioContext.onEnded(e => {
					this.List[this.currentAudioIndex].status = true;
				})
			},
			upCallback(page) {
				this.pageData(page.num).then(curPageData => {
					this.mescroll.endSuccess(curPageData.list.length, curPageData.end);
					if(this.isShow==0){
						if (page.num == 1) {
							this.dataList = curPageData.list;
							
						} else {
							this.dataList = this.dataList.concat(curPageData.list);
						}
					}else{
						if (page.num == 1) {
							this.List = curPageData.list;
						} else {
							this.List = this.dataList.concat(curPageData.list);
						}
					}
				}).catch((err) => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				});
			},
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			pageData(page) {
				return new Promise((resolute, reject) => {
					this.$u.api.classCollegeList({
							page: page,
							category_id: this.getId
						})
						.then((res) => {
							resolute(res.msg);
						}).catch(function(err) {
							this.mescroll.endErr();
						})
				});
			},
		},
	}
</script>

<style lang="less">
	// @import url("@/common/css/comm.less");

	.rare-book-container {
		font-size:28rpx;
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.title-box {
		background:#fff;
		padding: 20rpx;
		text-align: center;

		.box-1 {
			i {
				display: block;
				width: 68rpx;
				height: 2rpx;
				margin: 10rpx auto 0;
				background:transparent;
				
			}
		}

		.action {
			

			i {
				
			}
		}
	}

	.content {
		margin-top: 20rpx;
		flex: 1;
		overflow: auto;
	}

	.model {
		background:#fff;

		.model-box {
			width: 750rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;
			box-sizing: border-box;

			text {
				display: block;
			}
		}

		.one_ell {
			font-size:32rpx;
		}

		.time {
			font-size:26rpx;
			color:#ccc;
		}

		.waterfall-item {
			width: 100%;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
		}

		.play {
			width: 58rpx;
			height: 58rpx;
			display: block;
			margin-right: 30rpx;
		}

		.sound {
			width: 58rpx;
			height: 58rpx;
			margin-left: 30rpx;
		}
	}
</style>
